<template>
  <div style="margin: 10px;">
    <el-breadcrumb separator-class="el-icon-arrow-right"
                   style="margin-bottom: 10px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-table :data="users.slice((currentPage - 1) * 10, currentPage * 10)"
              stripe>
      <el-table-column prop="userID"
                       label="id">
      </el-table-column>
      <el-table-column prop="userAccount"
                       label="帐号">
      </el-table-column>
      <el-table-column prop="userName"
                       label="用户名">
      </el-table-column>
      <el-table-column label="用户权限">
        <template slot-scope="scope">
          {{powerCN(scope.row.userPower)}}
        </template>
      </el-table-column>
      <el-table-column label="帐号状态">
        <template slot-scope="scope">
          {{statusCN(scope.row.userStatus)}}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="300">
        <template slot-scope="scope">
          <template>
            <el-popconfirm title="是否确定？"
                           @onConfirm="changeStatus(scope.row.userStatus, scope.row.userID)">
              <el-button type="danger"
                         slot="reference"
                         :disabled="userID === scope.row.userID">
                <span v-if="scope.row.userStatus !== 0">封禁</span>
                <span v-if="scope.row.userStatus === 0">解封</span>
              </el-button>
            </el-popconfirm>
          </template>
          <span style="margin-left: 10px;"></span>
          <template>
            <el-popconfirm title="是否确定？"
                           @onConfirm="changePower(scope.row.userPower, scope.row.userID)">
              <el-button type="primary"
                         slot="reference"
                         :disabled="userID === scope.row.userID">
                <span v-if="scope.row.userPower !== 0">取消管理员</span>
                <span v-if="scope.row.userPower === 0">设为管理员</span>
              </el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange"
                   :current-page="currentPage"
                   :page-size="10"
                   layout="total, prev, pager, next, jumper"
                   :total="users.length"
                   :hide-on-single-page="true">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'UserManage',
  data () {
    return {
      currentPage: 1,
      users: []
    }
  },
  methods: {
    powerCN (userPower) {
      if (userPower !== 0) return '管理员'
      else return '普通用户'
    },
    statusCN (userStatus) {
      if (userStatus !== 0) return '正常'
      else return '封禁'
    },
    changeStatus (status, userID) {
      var operation = false
      if (status === 0) operation = true
      this.axios.post('setstatus', {
        managerID: this.$store.getters.userID,
        userID: userID,
        operation: operation
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '设置成功',
                position: 'top-left'
              })
              this.getUsers()
            } else if (response.data.err === 2) {
              this.$notify({
                title: '设置失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '设置失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '设置失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '设置失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    changePower (power, userID) {
      var operation = false
      if (power === 0) operation = true
      this.axios.post('setpower', {
        managerID: this.$store.getters.userID,
        userID: userID,
        operation: operation
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '设置成功',
                position: 'top-left'
              })
              this.getUsers()
            } else if (response.data.err === 2) {
              this.$notify({
                title: '获取用户列表失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '获取用户列表失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '设置失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '设置失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    currentChange (page) {
      this.currentPage = page
      window.scrollTo(0, 0)
    },
    getUsers () {
      this.axios.post('getuser', {
        userID: this.$store.getters.userID
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.users = response.data.userList
            } else if (response.data.err === 2) {
              this.$notify({
                title: '获取用户列表失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '获取用户列表失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '获取用户列表失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '获取用户列表失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  computed: {
    userID () {
      return this.$store.getters.userID
    }
  },
  mounted () {
    // get users
    this.getUsers()
  }
}
</script>

<style>
</style>
